<template>
  <div class="trademain w-full">
    <my-header class="header-main">
      <login-bar></login-bar>
    </my-header>
    <section class="page-global-exchange page">
      <!-- 币币主模块 -->
      <div class="content-top">
        <div class="cen-left">
          <coin-Tab  @onRowClick='getRowData' :key="coinListKey" :coinListData="coinList"></coin-Tab>
        </div>
        <div class="cen-right">
          <div class="cont-right">
            <div class="centerbox">
              <!-- K线部分 -->
              <div class="top_kline trading-chart">
                  <div class="klinetop">
                    <div class="ticker coin_title">
                      <div class="coin_infobox flex_space">
                        <div class="coinone flex">
                          <h2 class="symbol-name">{{coinInfo.tradcoin||'-'}}/{{coinInfo.maincoin||'-'}}</h2>
                          <span class="symbol-type" v-text="coinInfo.plate=='main'?'主板':'创新版'"></span>
                          <div>
                            <p class="us_price" :class="coinInfo.rise >= '0' ? 'color_up' : 'color_down'" >{{coinInfo.price||'0.00'}}</p>
                            <p class="cny_price">≈ {{coinInfo.cny||'0.00'}} CNY</p>
                          </div>
                          <div class="top_mag">
                            <p class="tl_p">涨幅</p>
                            <p :class="coinInfo.rise >= '0' ? 'color_up' : 'color_down'" 
                              v-if="coinInfo.rise>=0">+{{coinInfo.rise||'0.00'}}%</p>
                            <p :class="coinInfo.rise < '0' ? 'color_down' : 'color_up'" 
                              v-if="coinInfo.rise<0">{{coinInfo.rise||'0.00'}}%</p>
                              <p v-show="!coinInfo.rise">0.00</p>
                          </div>
                          <div class="top_mag">
                            <p class="tl_p">24H高</p>
                            <p class="bt_p">{{coinInfo.height||'-'}}</p>
                          </div>
                          <div class="top_mag">
                            <p class="tl_p">24H低</p>
                            <p class="bt_p">{{coinInfo.low||'-'}}</p>
                          </div>
                          <div class="top_mag">
                            <p class="tl_p">24H量</p>
                            <p class="bt_p">{{coinInfo.volume||'-'}}  </p>
                          </div>

                        </div>
                        <div class="set_cor">
                          <i class="iconfont icon-iconset0108"></i>
                        </div>
                      </div>
                        
                    </div>
                  </div>  
                    <div class="container-k">
                      <!-- K线 -->
                      <!-- <img src="../../assets/images/trade/klineimg.png" alt="" srcset=""> -->
                      <hq-Kline class="w937"  :key="klineKey" v-if="coinInfo.maincoin"
                        :DefaultPairName="coinInfo.tradcoin+'/'+coinInfo.maincoin" :DefaultName="coinInfo.tradcoin" :DefaultfloatPrecision="coinInfo.amount_accuracy" DefaultPeriod=6 ref='klinechart' 
                      ></hq-Kline>
                    </div>
                  
                </div>
              <!-- input -->
              <div class="center_input">
    <div class="buysell_trad">
      <template>
        <!-- 限价交易 -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="限价交易" name="first">
            <div class="mod-body">
              <div class="single-panel limit bor-right">
                <el-form :label-position="labelPosition" label-width="80px" :model="formAlign">
                  <el-form-item label="买入价">
                    <div class="flex">
                      <el-input v-model="formAlign.buyprice" size="small" maxlength="14"></el-input>
                      <span class="r_name">{{coinInfo.maincoin}}</span>
                    </div>
                  </el-form-item>
                  <el-form-item label="买入量">
                    <div class="flex">
                      <el-input v-model="formAlign.buynumber" size="small"></el-input>
                      <span class="r_name">{{coinInfo.tradcoin}}</span>
                    </div> 
                  </el-form-item>
                </el-form>
                <div class="t_plan">
                  <div class="block">
                    <el-slider
                      v-model="value2"
                      :step="20"
                      show-stops>
                    </el-slider>
                  </div>
                </div>
                <div class="ex_tips">
                  <p> <span>交易额</span> <em>{{formAlign.buyprice*formAlign.buynumber||'0.0000'}} {{coinInfo.maincoin}}</em> </p>
                </div>
                <div class="ex_btn" >
                  <el-button type=""   v-if='!userData.isLogin'>
                    <p >登录<em>或</em>注册</p>
                  </el-button>
                  <el-button type=""  @click="buy_limitBtn()" v-else class="corbuy">
                    <p v-html="buyingLabel"></p>
                  </el-button>
                </div>
              </div>
              <!-- <div class="single-panel limit">

              </div> -->
              <div class="single-panel limit">
                <el-form :label-position="labelPosition" label-width="80px" :model="formAlign">
                  <el-form-item label="卖出价">
                    <div class="flex">
                      <el-input v-model="formAlign.sellprice" size="small" maxlength="14"></el-input>
                      <span class="r_name">{{coinInfo.maincoin}}</span>
                    </div>
                  </el-form-item>
                  <el-form-item label="卖出量">
                    <div class="flex">
                      <el-input v-model="formAlign.sellnumber" size="small"></el-input>
                      <span class="r_name">{{coinInfo.tradcoin}}</span>
                    </div> 
                  </el-form-item>
                </el-form>
                <div class="t_plan">
                  <div class="block">
                    <el-slider
                      v-model="value2"
                      :step="20"
                      show-stops>
                    </el-slider>
                  </div>
                </div>
                <div class="ex_tips">
                  <p> <span>交易额</span> <em>{{formAlign.sellprice*formAlign.sellnumber||'0.0000'}} {{coinInfo.maincoin}}</em> </p>
                </div>
                <div class="ex_btn" >
                  <el-button type=""   v-if='!userData.isLogin'>
                    <p >登录<em>或</em>注册</p>
                  </el-button>
                  <el-button type=""  @click="sell_limitBtn()" v-else class="corsell">
                    <p v-html="sellingLabel"></p>
                  </el-button>
                </div>
              </div>
              <!-- end -->
            </div>
          </el-tab-pane>
          <!-- 市价交易 -->
          <el-tab-pane label="市价交易" name="second">
            <div class="mod-body">
              <div class="single-panel limit bor-right">
                <el-form :label-position="labelPosition" label-width="80px" :model="formMark">
                  <el-form-item label="买入价">
                    <div class="flex">
                      <el-input  size="small" placeholder="以市场上最优价格买入" disabled></el-input>
                      <span class="r_name">{{coinInfo.maincoin}}</span>
                    </div>
                  </el-form-item>
                  <el-form-item label="买入量">
                    <div class="flex">
                      <el-input v-model="formMark.buynumber" size="small"  ></el-input>
                      <span class="r_name">{{coinInfo.tradcoin}}</span>
                    </div> 
                  </el-form-item>
                </el-form>
                <div class="t_plan">
                  <div class="block">
                    <el-slider
                      v-model="value2"
                      :step="20"
                      show-stops>
                    </el-slider>
                  </div>
                </div>
                <div class="ex_tips">
                  <!-- <p> <span>交易额</span> <em>0.00000000 USDT</em> </p> -->
                </div>
                <div class="ex_btn" >
                  <el-button type=""   v-if='!userData.isLogin'>
                    <p>登录<em>或</em>注册</p>
                  </el-button>
                  <el-button type=""  @click="buy_marketBtn()" v-else class="corbuy">
                    <p v-html="buyingLabel"></p>
                  </el-button>
                </div>
              </div>
              <!-- <div class="single-panel limit">

              </div> -->
              <div class="single-panel limit">
                <el-form :label-position="labelPosition" label-width="80px" :model="formMark">
                  <el-form-item label="卖出价">
                    <div class="flex">
                      <el-input v-model="formMark.name" size="small" placeholder="以市场上最优价格卖出" disabled></el-input>
                      <span class="r_name">{{coinInfo.maincoin}}</span>
                    </div>
                  </el-form-item>
                  <el-form-item label="卖出量">
                    <div class="flex">
                      <el-input v-model="formMark.sellnumber" size="small" ></el-input>
                      <span class="r_name">{{coinInfo.tradcoin}}</span>
                    </div> 
                  </el-form-item>
                </el-form>
                <div class="t_plan">
                  <div class="block">
                    <el-slider
                      v-model="value2"
                      :step="20"
                      show-stops>
                    </el-slider>
                  </div>
                </div>
                <div class="ex_tips">
                  <!-- <p> <span>交易额</span> <em>0.00000000 USDT</em> </p> -->
                </div>
                <div class="ex_btn" >
                  <!-- 市价卖出 Btn -->
                  <el-button type="" v-if='!userData.isLogin'>
                    <p>登录<em>或</em>注册</p>
                  </el-button>
                  <el-button type=""  @click="sell_marketBtn()" v-else class="corsell">
                    <p v-html="buyingLabel"></p>
                  </el-button>
                </div>
              </div>
              <!-- end -->
            </div>
          </el-tab-pane>
          <!-- <el-tab-pane label="止盈止损" name="third">止盈止损</el-tab-pane> -->
        </el-tabs>
      </template>
      
    </div>
  </div>
              <!-- inputend -->
            </div>
            <div class="coinrightbox">
              <!-- 大盘记录 成交记录 -->
                <div class="right-history">
    <div class="global-trades">
      <div class="his_left with_com" v-show="hisSHow1==1">
        <div class="dtop-title flex">
          <p class="m-left-10 r_active" @click="hisTab(1)" v-show="hisSHow1==1">盘口</p>
          <p class="m-left-10 hisr_none" @click="hisTab(2)" v-show="hisSHow2==2" >实时成交</p>
        </div>
        <div class="mod order-books cur" v-if="hisSHow1==1">
          <div class="mod-head">
            <!-- <div class="flex mod_red">
              <div class="active">
                <img src="../../assets/images/trade/11.png" alt="" srcset="">
              </div>
              <div>
                <img src="../../assets/images/trade/22.png" alt="" srcset="">
              </div>
              <div>
                <img src="../../assets/images/trade/33.png" alt="" srcset="">
              </div>
            </div> -->
          </div>
          <div class="mod-body" >
            <div class="mod-title">
              <span class="price" >价格 ({{coinInfo.maincoin}})</span> 
              <span class="amount" >数量 ({{coinInfo.tradcoin}})</span> 
              <span class="total" >累计 ({{coinInfo.maincoin}})</span>
            </div>
            
            <div class="his_back">
              <div class="list_sell">
                <div class="list bids" v-if="priceHisData.sell!=''">
                  <p  data-ee="fillPrice" class="single-orderbook" :style='{backgroundSize:(item.amount/sellListTotal)*500+"%   100%"}'  v-for="(item,index) in priceHisData.sell" :key="index">
                  <span  class="price color-sell" @click="copyPrice(item,'sell')">{{item.price}}</span> 
                  <span  class="amount">{{item.amount}}</span> 
                  <span  class="total">{{(item.price*item.amount).toFixed(6)*1}}</span>
                  </p>
                </div>
                <!-- 暂无数据 -->
                <div class="no-data txt-center"  v-else  >
                  <p v-text="$t('label108')" class="line-h50"></p>
                </div>
              </div>
              
              <div class="now-pric">
                <div class="ticker-close" >
                <span class="color-down" >
                        {{coinInfo.price}}
                        <em  class="estimate hide1440">≈ {{coinInfo.cny}} CNY</em>
                </span> 
                <!-- <a target="_self" href="/zh-cn/orderbooks/?type=exchange&amp;s=lol_usdt" data-v-1b2949ff="" >
                        更多
                </a> -->
              </div> 
              </div>
              
              <div class="list_buy">
                <div class="list asks"  v-if="priceHisData.buy!=''">
                  <p  data-ee="fillPrice" class="single-orderbook"  :style='{backgroundSize:(item.amount/sellListTotal)*500+"%   100%"}' v-for="(item,index) in priceHisData.buy" :key="index">
                    <span  class="price color-buy" @click="copyPrice(item,'buy')">{{item.price}}</span> 
                    <span  class="amount">{{item.amount}}</span> 
                    <span  class="total">{{(item.price*item.amount).toFixed(6)*1}}</span>
                  </p>
                </div>
                <!-- 暂无数据 -->
                <div class="no-data txt-center"  v-else  >
                  <p v-text="$t('label108')" class="line-h50"></p>
                </div> 
              </div>
            
            </div>    
              <!-- <div class="ticker-close" >
                <span class="color-down" >
                        0.001991
                        <em  class="estimate hide1440">≈ 0.0138 CNY</em>
                </span> 
                <a target="_self" href="/zh-cn/orderbooks/?type=exchange&amp;s=lol_usdt" data-v-1b2949ff="" >
                        更多
                </a>
              </div>  -->
              <!-- 测试 隐藏了 -->
              <div class="list asks" style="display:none" >
                  <p  data-ee="fillPrice" class="single-orderbook" style="background-size: 30% 100%;">
                    <span  class="price color-sell">0.001998</span> <span  class="amount">2031.7499</span> 
                    <span  class="total">2031.7499</span>
                  </p>
              </div>   
              <div class="list bids" style="display:none">
                  <p  data-ee="fillPrice" class="single-orderbook" style="background-size: 10% 100%;">
                  <span  class="price color-buy">0.001981</span> 
                  <span  class="amount">247347.4188</span> 
                  <span  class="total">386852.6018</span>
                  </p>
              </div>
            <!-- </dd> -->
            <!-- </dl> -->
            </div>
        </div>

      </div>
      <div class="his_right with_com" v-show="hisSHow2==1">
        <div class="dtop-title flex">
          <p class="m-left-10 " @click="hisTab(1)" v-show="hisSHow1==2">盘口</p>
          <p class="m-left-10 r_active" @click="hisTab(2)" v-show="hisSHow2==1">实时成交</p>
        </div>
        <!-- 成交历史 实时成交栏目 大盘历史 -->
            <div class="history_box" >
            <div class="content-rt-history trade-table">
                <template>  
                  <el-table
                    :data='historicalRecords'
                    :cell-style='myCellStyle'

                    max-height='732'
                  >
                    <el-table-column
                      :label='$t("time")||"时间"'   
                    >
                      <span
                        class=""
                        slot-scope="scope"
                        v-text="scope.row.wdate"
                      ></span>
                    </el-table-column>
                    <el-table-column :label='priceLabel' width="100" align='right'>
                      <template slot-scope="scope">
                        <!-- 0是买入，1是卖出 -->
                        <span :class="scope.row.type=='sell'?'color-success':'color-danger'">{{scope.row.price}} </span>
                      </template>
                    </el-table-column>
                    <el-table-column :label='amountLabel' width="100" align='right'>
                      <template slot-scope="scope">
                        {{scope.row.number*1}}
                      </template>
                    </el-table-column>
                    <!-- <el-table-column align='right' :label='totalLabel' width="100">
                      <div slot-scope="scope">{{scope.row.total|toFix(3)}}</div>
                    </el-table-column> -->
                  </el-table>
                </template>
              </div>
              </div>
             
      </div>
    </div>
  </div>
              <!-- 大盘历史end -->
            </div>
          </div>
        </div>
      </div>

      <!-- 当前委托 -->
      <!-- 委托历史 (最近一周) -->
      <div class="bottombox-list">
        <!-- bottom-order -->
        <div class="bottomlist">
    <div class="content-center m-top-5">
      <div class="bot-title">
        <p class="m-left-10">当前委托</p>
      </div>
      <div class="histable-list">
        <template>
          <el-table :data="mytableData" style="width: 100%" height="250">
            <el-table-column prop="wdate" label="时间" width="130"></el-table-column>
            <el-table-column prop="tradcoin" label="交易币种" width="100"></el-table-column>
            <el-table-column prop="maincoin" label="主币种" width="100"></el-table-column>
            <el-table-column prop="cny" label="人民币单价" width="100"></el-table-column>
            <el-table-column prop="price" label="委托单价" width="120"></el-table-column>
            <el-table-column prop="address" label="方式" width="">
              <template slot-scope="scope">
                  <p v-text="scope.row.style=='limit'?'限价':'市价'"  :class="scope.row.style=='limit'?'color-red':'color-fff'"></p>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="zip" :label='priceLabel' width="120"></el-table-column> -->
            <el-table-column prop="number" :label='amountLabel' ></el-table-column>
            <el-table-column prop="unfilled" label="未成交数量" ></el-table-column>
            <el-table-column prop="type" label="类型" width="120">
              <template slot-scope="scope">
                  <p 
                  v-text="scope.row.type=='buy'?'买入':'卖出'"
                  :class="scope.row.type=='buy'?'color-buy':'color-sell'"></p>
              </template>
            </el-table-column>
            <el-table-column prop="state" label="状态" width="">
              <template slot-scope="scope">
                  <p v-if="scope.row.state=='unfilled'">未成交</p>
                  <p v-if="scope.row.state=='section'">部分成交</p>
                  <p v-if="scope.row.state=='all'">全部成交</p>
                  <p v-if="scope.row.state=='cancel'">已撤销</p>
              </template>
            </el-table-column>
            <el-table-column prop="unfilled" label="未成交" width="120"></el-table-column>
            <el-table-column prop="zip" label="操作" width="">
              <template slot-scope="scope">
                <el-button @click="close_entrust(scope.row)" type="text" :data-id="scope.row.autoid" size="small">撤销</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
    </div>
    <!-- 委托历史 (最近一周) -->
      <div class="content-bottom m-top-5">
        <div class="bot-title">
          <p class="m-left-10">委托历史 (最近一周)</p>
        </div>
        <div class="histable-list">
        <template>
          <el-table :data="HismytableData" style="width: 100%" height="250">
            <el-table-column prop="wdate" label="时间" width="150"></el-table-column>
            <el-table-column prop="tradcoin" label="交易币种" width="120"></el-table-column>
            <el-table-column prop="maincoin" label="主币种" width="120"></el-table-column>
            <el-table-column prop="cny" label="人民币单价" width="120"></el-table-column>
            <el-table-column prop="price" label="委托单价" ></el-table-column>
            <el-table-column prop="address" label="方式" width="">
              <template slot-scope="scope">
                  <p v-text="scope.row.style=='limit'?'限价':'市价'"  :class="scope.row.style=='limit'?'color-red':'color-fff'"></p>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="zip" :label='priceLabel' width="120"></el-table-column> -->
            <el-table-column prop="number" label='数量' ></el-table-column>
            <el-table-column prop="unfilled" label="未成交数量" ></el-table-column>
            <el-table-column prop="type" label="类型" width="120">
              <template slot-scope="scope">
                  <p 
                  v-text="scope.row.type=='buy'?'买入':'卖出'"
                  :class="scope.row.type=='buy'?'color-buy':'color-sell'"></p>
              </template>
            </el-table-column>
            <el-table-column prop="state" label="状态" width="">
              <template slot-scope="scope">
                  <p v-if="scope.row.state=='unfilled'">未成交</p>
                  <p v-if="scope.row.state=='section'">部分成交</p>
                  <p v-if="scope.row.state=='all'">全部成交</p>
                  <p v-if="scope.row.state=='cancel'">已撤销</p>
              </template>
            </el-table-column>
            <el-table-column prop="unfilled" label="未成交" ></el-table-column>
          </el-table>
        </template>
      </div>
      </div>
  </div>
        <!-- bottom-order end -->
      </div>
    </section>
    <my-footer></my-footer>
  </div>
</template>
<script>
import mainCoinModel from "@/model/allCoinModel.js";
import { Loading, Form } from "element-ui";
import { randomString } from "@/assets/js/common.js";
import { checkTradePassword } from "../../service/TradeService.js";
import myStorage from '@/assets/js/myStorage';
import coinTab from "@/components/TradeCom/coinTab.vue";
import hqKline from "../trade/hqkline.vue";

import {
  addCustomList,
  removeCustomList,
  matchCustomList
} from "@/assets/js/common.js";
let ajaxDone = true;
export default {
  components: { 
    coinTab,
    hqKline
  },
  data() {
    return {
      atxt:'测试测试输出',
      tradcoin:'',
      maincoin:'',
      mainCoinType:sessionStorage.getItem('mainCoinType')||'USDT',

      activeName: "first",
      labelPosition: 'right',
      formAlign: {
          buyprice: '',
          sellprice: '',
          region: '',
          type: '',
          name:'',
          region:'',
      },
      formMark:{
        buynumber:'',
        sellnumber:'',
        name:'',
      },
      value2: 0,
      coinInfo:{},
      // 当日委托
      mytableData:[],
      // 历史委托
      HismytableData:[],
      areaID:'main',
      // 大盘历史
      hisSHow1:1,
      hisSHow2:1,
      screenWidth: document.body.clientWidth, // 屏幕尺寸
      mainCoinModel: mainCoinModel,
      userData: this.userModel,
      currentId: 0,
      tableData: null,
      showLoading: true,
      historicalRecords: [],//买入
      priceHisData:[],//
      // 撤单
      autoid:'',
      setion_data:'',

      websocket:null,
      websocket2:null,

      coinList:[],
      coinListKey:new Date().getTime(),

      klineKey:new Date().getTime()+'klineKey'
    };
  },
  computed: {
    amountLabel() {
      return `${this.$t("amount") || "数量"}(${this.tradcoin})`;
    },
    buyingLabel() {
      return `${this.$t("buy") || "买入"}&nbsp;${this.tradcoin}`;
    },
    sellingLabel() {
      return `${this.$t("sell") || "卖出"}&nbsp;${this.tradcoin}`;
    },
    priceLabel() {
      return `${this.$t("price") || "价格"}(${this.maincoin})`;
    },
    totalLabel() {
      return `${this.$t("total") || "累计"}(${this.maincoin})`;
    },
    // 成交额
    volumeTrans(){
      return `${this.$t("ptxt116") || "成交额"}(${this.maincoin})`;
    },
    // 已成交
    tradedTrans(){
      return `${this.$t("ptxt117") || "已成交"}(${this.tradcoin})`;
    },
    //最新买入总计
    buyListTotal() {
      let total = 0;
      this.priceHisData.buy.map(item => {
        total += item.total * 1;
      });
      return total;
    },
    //最新卖出总计
    sellListTotal() {
      let total = 0;
      this.priceHisData.sell.map(item => {
        total += item.amount * 1;
      });
      return total;
    },
    marketSocketData(){
      return this.$store.state.marketSocketData
    },
    coinSocketData(){
      return this.$store.state.coinSocketData
    }
  },
  watch:{
    //监听socket 数据  实时更新
    coinSocketData(data){
      //更新币种数据 
      if(data.info&&this.coinInfo&&this.coinInfo.tradcoin){
        //判断接收到的数据是否是当前币种数据 不是就不赋值
        if(data.info[0].tradcoin==this.coinInfo.tradcoin&&data.info[0].maincoin==this.coinInfo.maincoin){
          this.setData(data);
        }
      }
    }
  },
  created(){
    if(this.coinSocketData&&this.coinSocketData.info){
      if(this.marketSocketData&&this.marketSocketData.symbols){
        this.initCoinList(this.marketSocketData.symbols,1);
      }else{
        this.getLeftCoinList();
      }
    }else{
      this.getLeftCoinList();
    }
  },
  mounted() {
    const that = this;
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth;
        that.screenWidth = window.screenWidth;
        // console.log('--屏幕宽度判断右侧大盘历史是否折叠--'+that.screenWidth);
        if(that.screenWidth<1500){
          this.hisSHow2=2;
        }else {
          this.hisSHow1=1;
          this.hisSHow2=1;
        }
      })()
    }
  },
  methods: {
    //初始获取币种列表
    getLeftCoinList(){
      this.request(this.api.symbols).then(res => {
        if(res.code==0){
          this.initCoinList(res.data,2);
        }
      })
    },

    initCoinList(resData,type){
      let coinList = [],selectedCoin,coinData;
      resData.forEach(data=>{
        //筛选允许交易币种
        if(data.state=='enable'){
          coinList.push(data)
        }
      })
      this.coinList = coinList;
      this.coinListKey = new Date().getTime();

      selectedCoin = JSON.parse(sessionStorage.getItem('quotationDetailsData'));
      //检查上次是否已经操作过选择币种 浏览器记住了上次选择的币种 本次默认上次选择币种;
      if(selectedCoin){
        coinData = selectedCoin;
      }else{
        coinData = coinList[0];
        sessionStorage.setItem('quotationDetailsData',JSON.stringify(coinData))
      }
      if(type==1){
        if(this.coinSocketData.info[0].tradcoin==coinData.tradcoin&&this.coinSocketData.info[0].maincoin==coinData.maincoin){
          //如果ws有数据 取ws的数据 不调接口
          this.setCoinInfo(this.coinSocketData)
        }else{
          this.getCoinInfo(coinData);
        }
      }else{
        this.getCoinInfo(coinData);
      }

      //发送ws 币种信息
      this.sendWsParams(coinData);
    },
    

    //初始获取币种信息
    getCoinInfo(coinData){
      this.request(this.api.tradCoinInfo,{maincoin:coinData.maincoin,tradcoin:coinData.tradcoin}).then(res=>{
        if(res.code==0){
          this.setCoinInfo(res.data)
        }
      })
    },
    setCoinInfo(resData){
      //只在第一次加载币种数据时设置价格
      this.formAlign.buyprice = resData.info[0].buyprice;
      this.formAlign.sellprice = resData.info[0].sellprice;
      //传递给档位图做初始化渲染
      // this.mapData = resData;

      //设置数据
      this.setData(resData);
    },
    
    //填充币种数据
    setData(resData){
      this.coinInfo = resData.info[0];

      document.title = `${this.coinInfo.price} ${this.coinInfo.tradcoin}/${this.coinInfo.maincoin} 星空交易所`

      this.priceHisData = resData;//五档图

      //成交历史
      let historicalRecords = this.historicalRecords;
      resData.top.forEach(top=>{
        historicalRecords.forEach((order,index)=>{
          if(top.autoid==order.autoid){
            historicalRecords.splice(index,1)
          }
        })
      })
      this.historicalRecords = resData.top.concat(historicalRecords);
      this.historicalRecords.length = 50;
    },

    sendWsParams(coinData){
      // console.log(this.$ws);
      if(this.$ws&&this.$ws.readyState == 1){
        //通知 ws 更新币种数据
        this.$ws.send(`${coinData.maincoin}_${coinData.tradcoin}`)
      }else{
        //如果ws没准备好  0.5s后再试
        setTimeout(() => {
          //通知 ws 更新币种数据
          this.sendWsParams(coinData)
        }, 500);
      }
    },


    handleClick(tab, event) {
        console.log(tab, event);
    },
    // 单列样式
    myCellStyle() {
      return "padding:0px 0 !important;border:none";
    },
    // 历史记录切换
    hisTab(val){
      if(this.screenWidth<1400){
        console.log(this.screenWidth);
        if(val==1){
          this.hisSHow1=1;
          this.hisSHow2=2;
        }else if(val==2){
          this.hisSHow1=2;
          this.hisSHow2=1;
        }
      }else{
        return
      }
    },
    //表格列点击
    getRowData(data) {
      // this.bus.$emit("onRowClick",data);
      if(data.tradcoin==this.coinInfo.tradcoin&&data.maincoin==this.coinInfo.maincoin){
        return;
      }else{
        this.coinInfo = data;
        this.getCoinInfo(data);
        this.sendWsParams(data)
        //当前委托
        this.entrust_order();
        //历史委托
        this.getentrust_history();
        this.klineKey = new Date().getTime()+'klineKey'
      }

    },
    // 我的历史委托
    getentrust_history(){
      let postData={
        tradcoin:this.coinInfo.tradcoin,
        maincoin:this.coinInfo.maincoin,
        page:'1',
        limit:'100',
      }
      if (!this.userData.isLogin) {
        return false;
      }else{
        this.request(this.api.entrust_history,postData).then(res => {
          if(res.code==0){
            this.HismytableData=res.data;
          }else{
            this.HismytableData=[];
          }
        });
      }
    },
    // 当前委托
    entrust_order(){
      let postData={
        tradcoin:this.coinInfo.tradcoin,
        maincoin:this.coinInfo.maincoin,
        page:'1',
        limit:'100',
      }
      if (!this.userData.isLogin) {
        return false;
      }else{
        this.request(this.api.entrust_order,postData).then(res => {
          if(res.code==0&&res.data){
            this.mytableData=res.data;
          }else{
            this.mytableData=[];
          }
        });
      }
    },
    //限价交易 限价买入
    // 01限价买入
    buy_limitBtn(){
      let buyFormData={
        tradcoin:this.coinInfo.tradcoin,
        maincoin:this.coinInfo.maincoin,
        plate:this.areaID,
        number:this.formAlign.buynumber,
        price:this.formAlign.buyprice,
      }
      this.request(this.api.buy_limit,buyFormData).then(res => {
        if(res.code==0){
          this.successMsg(res.msg);
          
          // 通知刷新数据
          this.entrust_order();
          this.getentrust_history();
          this.sendWsParams(this.coinInfo);
        }else{
          this.errMsg(res.msg);
        }
      });
    },
    // 02限价卖出
    sell_limitBtn(){
      let sellFormData={
        tradcoin:this.coinInfo.tradcoin,
        maincoin:this.coinInfo.maincoin,
        plate:this.areaID,
        number:this.formAlign.sellnumber,
        price:this.formAlign.sellprice,
      }
      this.request(this.api.sell_limit,sellFormData).then(res => {
        if(res.code==0){
          this.successMsg(res.msg);
          // 通知刷新数据
          this.entrust_order();
          this.getentrust_history();
          this.sendWsParams(this.coinInfo);
        }else{
          this.errMsg(res.msg);
        }
      });
    },
    // 03 市价买入
    buy_marketBtn(){
      let postData={
        tradcoin:this.coinInfo.tradcoin,
        maincoin:this.coinInfo.maincoin,
        plate:this.areaID,
        number:this.formMark.buynumber,
      }
      this.request(this.api.buy_market,postData).then(res => {
        if(res.code==0){
          this.successMsg(res.msg);
          this.entrust_order();
          this.getentrust_history();
          this.sendWsParams(this.coinInfo);
        }else{
          this.errMsg(res.msg);
        }
      });
    },
    // 市价买入
    sell_marketBtn(){
      let postData={
        tradcoin:this.coinInfo.tradcoin,
        maincoin:this.coinInfo.maincoin,
        plate:this.areaID,
        number:this.formMark.sellnumber,
      }
      this.request(this.api.sell_market,postData).then(res => {
        if(res.code==0){
          this.successMsg(res.msg);
          this.entrust_order();
          this.getentrust_history();
          this.sendWsParams(this.coinInfo);
        }else{
          this.errMsg(res.msg);
        }
      });
    },
    // 档位图价格
    copyPrice(item,type){
      if(type=='buy'){
        this.formAlign.buyprice=item.price;
      }else{
        this.formAlign.sellprice=item.price;
      }
      
    },
    // 撤单
    close_entrust(row){
      this.$confirm('此操作将撤销该笔委托, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.request(this.api.close_entrust,{id:row.autoid}).then(res => {
          if(res.code==0){
            this.successMsg(res.msg);
            this.entrust_order();
            this.getentrust_history();
            this.sendWsParams(this.coinInfo);
          }else{
            this.errMsg(res.msg);
          }
        });
      }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消撤销'
          });          
      });
    },
  }, 
};
</script>

<style lang="scss" scoped>
.trademain{
  min-width: 1560px;
  .header-main{
    .hd-body{background: #131625;}
  }  
  .page {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    border-top:1px solid transparent;
  }
  .content-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    // min-width: 1366px;
    height: 780px;
    margin-top: 6px;
    .cen-left{min-width: 280px;}
  }
  // cen-right
  .cen-right{
    margin: 0 10px 0 8px;width: 100%;min-width: 1000px;
    .cont-right{
      display: flex;
      .centerbox{margin-right:8px;width: calc(100% - 322px);}
    }
  }
  
}
.bottombox-list{
  padding: 0 10px 0 0;
}
// @media screen and (max-width: 1400px){
//   .page-global-exchange .content-top {
//       height: 780px;
//   }
//   .cen-right{
//     .cont-right{
//       display: flex;
//       .centerbox{margin-right:8px;width: calc(100% - 562px);}
//     }
//   }
// }

// k线部分
.trading-chart{ 
  .ticker {
    position: relative;
    height: 44px!important;
    // border-bottom: 1px solid;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    border-radius: 2px 2px 0 0;
    white-space: normal;
    padding-right: 26px;
    font-weight: 400;
    .flex_space{display: flex;align-items: center;justify-content:space-between ;}
    .coinone {
      align-items:center ;
      .symbol-name {
        height: 44px;
        line-height: 44px;
        vertical-align: unset;
        white-space: nowrap;
        margin-right: 4px;
        font-size: 16px;
        font-weight: 400;
        position: relative;
        cursor: pointer;
        display: inline-block;
        margin-left: 8px;
        padding-left: 8px;
      }
      .us_price{font-size: 16px;line-height: 20px;}
      .cny_price{font-size: 12px;font-weight: 400;color: #61688a;}
      .tl_p{color: #61688a;}
      .bt_p{color: #b0b8db;}
      .top_mag{
        margin-left: 15px;font-size: 12px;
        p{line-height: 18px;}
      }
      
    }
    .set_cor{
      position: absolute;right: 15px;bottom: 10px;cursor: pointer;
      i{font-size: 20px;}
      &:hover{color: #357ce1;font-size: 18px;}
    }
    .symbol-type {
        margin-right: 16px;
        height: 16px;
        line-height: 16px;
        font-size: 12px;
        border-radius: 3px;
        padding: 0 2px;
        color: #357ce1;
        border: 1px solid rgba(53,124,225,.4);
        vertical-align: middle;
        position: relative;
        cursor: pointer;
        display: inline-block;
    }
  }
  .chart-actions {
    height: 24px;
    border-bottom: 1px solid;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 12px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  // 图表 K线宽度 高度
  .container-k {
    display: flex;
    width: 100%;
    // width: 938px;
    // height: 455px;
    max-width: 950px;
    height: 454px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-direction: column;
    flex-direction: column;
    img{width: 100%;height: 455px;}
    .w937{width: 100%;height: 455px;}
  }
}
// @media screen and (min-width: 1720px){
//   .trading-chart{
//     .top_kline {
//         width: calc(100% - 678px);
//         // img{width: calc(100% - 678px);}
//         // .container-k{width: calc(100% - 678px);}
//     }
//   }
// }
// @media screen and (min-width: 1450px){
//   .trading-chart{
//     .top_kline {
//         width: calc(100% - 678px);
//         // img{width: calc(100% - 678px);}
//     }  
//     // .container-k{width: calc(100% - 678px);}
//   }
  
// }

// input、
.center_input{
  background-color: #171b2b;
  margin-top: 6px;
  height: 274px;
}
.buysell_trad{
  .mod-body {
    height: calc(100% - 32px);
    position: relative;
    display: flex;
    flex-direction: row;
  }
  .single-panel {
    width: 100%;
    height: 100%;
  }
    .t_plan{
    padding:0 30px;
  }
  .ex_tips{
    height: 20px;line-height: 20px;padding:0 20px;
    span{font-size: 12px;}
		em{}
  }
  .ex_btn{
    padding:0 20px;margin-top:15px;
    button{width: 100%;}
    em{color: #b0b8db;}
  }
  .r_name{display: inline-block;width: 80px;text-align: center;}
}
</style>

<style lang="scss" scoped>
.right-history{box-sizing:border-box;padding-right: 0px;}
.global-trades{
  display:flex;
  .with_com{flex: 1;}
  .his_left{min-width: 320px;}
  .his_right{min-width: 320px;}
  .dtop-title{
    height: 44px;line-height: 44px;color: #ffffff;background: #131625;
    width: 100%;
    border-bottom: 1px solid #131625;
    border-radius: 2px 2px 0 0;
    p{width: 70px;text-align: center;cursor: pointer;}
  }
  .order-books {
    width: 100%;
    min-width: 310px;
    height: 100%;
    .mod-head{
      height: 36px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      overflow: initial !important;
      position: relative;
      background: #171b2b;
      border-bottom:1px solid #111217;
      box-sizing: border-box;
    }
    .mod-body {
      height: calc(100% - 36px);
      overflow: hidden;
      .mod-title{
        background-color: #171b2b;color: #61688a;position: relative;top: 0;line-height: 28px;
          margin-top: 0;z-index: 1;padding:0 10px;display: flex;
        span {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            text-align: right;
            white-space: nowrap;
            &.price{text-align: left;}
        }
      }
      dl {
        font-size: 12px;
        position: relative;
        height: 100%;
        dt{background-color: #171b2b;color: #61688a;position: relative;top: 0;line-height: 28px;
          margin-top: 0;z-index: 1;padding:0 10px;display: flex;}
        dd{background-color: #171b2b;border: 1px solid #111217;border-right: none;border-left: none;position: absolute;top: calc(50% - 5px);
            left: 0;width: 100%;} 
        span {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            text-align: right;
            white-space: nowrap;
            &.price{text-align: left;}
        }
        p{
          color: #b0b8db;
          padding: 0 15px;
          line-height: 20px;
          height: 20px;
          display: flex;
          -ms-flex-negative: 0;
          flex-shrink: 0;
          cursor: pointer;
          background-position: 0;
          background-size: 0 0;
          background-repeat: no-repeat;
          -webkit-box-flex: 1;
          -ms-flex: 1;
          flex: 1;
          -webkit-transition: margin .5s;
          -o-transition: margin .5s;
          transition: margin .5s;
          }
        
        
      }
      // ----------
      .his_back{
        background: #171b2b;
        .single-orderbook{
          &:hover{background: #1e2237;}
        }
      }
      .list_buy,.list_sell{height: 319px;overflow: hidden;}
      .list{
          p{
          color: #b0b8db;
          font-size: 12px;
          padding: 0 15px;
          line-height: 20px;
          height: 20px;
          display: flex;
          -ms-flex-negative: 0;
          flex-shrink: 0;
          cursor: pointer;
          background-position: 0;
          background-size: 0 0;
          background-repeat: no-repeat;
          -webkit-box-flex: 1;
          -ms-flex: 1;
          flex: 1;
          -webkit-transition: margin .5s;
          -o-transition: margin .5s;
          transition: margin .5s;
          }
        .single-orderbook{justify-content:space-between;}  
        span {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            text-align: right;
            white-space: nowrap;
            &.price{text-align: left;}
        }
      }
      .now-pric {
          .ticker-close{
            color: #7085ac;padding: 0 16px;height: 32px;line-height: 32px;display: flex;justify-content:space-between;white-space:nowrap;
            border-top: 1px solid #111217;border-bottom: 1px solid #111217;
            span.color-down{color: #d74e5a;max-width: 230px;display: inline-block;white-space: normal;overflow: hidden;font-size: 16px;}
          }
        }
      .asks {
            display: flex;
            bottom: 0px;
            -webkit-box-orient: vertical;
            -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
            p{
              background-position:100%;
              background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(250, 82, 82, .1)), to(rgba(250, 82, 82, .1)));
	background-image: -o-linear-gradient(rgba(250, 82, 82, .1), rgba(250, 82, 82, .1));
	background-image: linear-gradient(rgba(250, 82, 82, .1), rgba(250, 82, 82, .1))
            }
        }
        .bids{
            display: flex;
            bottom: 0px;
            -webkit-box-orient: vertical;
            -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
          // top: 34px;
          p {
              background-position:100%;
              background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(18, 184, 134, .1)), to(rgba(18, 184, 134, .1)));
              background-image: -o-linear-gradient(rgba(18, 184, 134, .1), rgba(18, 184, 134, .1));
              background-image: linear-gradient(rgba(18, 184, 134, .1), rgba(18, 184, 134, .1))
            }

        }
    }
  }
}

.order-books .mod-body dl dd>div {
    position: absolute;
    width: 100%;
    left: 0;
}
.order-books .mod-body dl .now-pric {
	height: 35px
}

.order-books .mod-body dl .now-pric .ticker-close {
	height: 35px;
	padding: 0 16px;
	line-height: 35px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	white-space: nowrap
}
.his_right {
  margin-left: 8px;
  .history_box{
      min-height: 734px;
  }
}
.mod_red{
  display: flex;align-items:center;cursor: pointer;
  >div{
    margin: 0 0px 0 15px;
    border:1px solid #383f66;padding: 2px 4px;border-radius: 2px;
    img{width: 10px;height: 10px;}
    &:hover{border-color: #357ce1;}
  }
  .active{border-color: #357ce1;}
}
@media screen and  (min-width:1200px) and (max-width: 1600px)  {
  .global-trades{
    display:flex;padding-right:8px;
    .with_com{flex: 1;}
    .his_left{min-width: 300px;}
    .his_right{min-width: 300px;}
  }
	.order-books {
		width: 288px;
  }
  .order-books .mod-body dl dt {
		line-height: 24px
	}

	.order-books .mod-body dl .now-pric {
		height: 32px
	}

	.order-books .mod-body dl .now-pric .ticker-close {
		height: 30px;
		line-height: 30px;
		padding-left: 8px
  }
  .order-books .mod-body dl dd .asks {
		bottom: 33px
  }
  // 响应式
  .right-history{width: 316px;}
  .his_right{margin-left: 0;}
  .r_active{border-top: 3px solid #357ce1;background: #171b2b;}

  .trademain .cen-right .cont-right .centerbox{margin-right:8px;width: calc(100% - 600px);}
}
// bottom-order
.bot-title {
  height: 40px;
  line-height: 40px;
  color: #ffffff;
  background: #131625;
  width: 100%;
  border-bottom: 1px solid #131625;
  border-radius: 2px 2px 0 0;
}


</style>